<template>
  <div class="zl-div-main">
    <div id="gmapMapOne" class="zl-map-container-one"></div>
    <div id="gmapMapTwo" class="zl-map-container-two"></div>
    <div class="pane">
      <a href="javascript:void(0);" @click="draw('Polyline')">画线</a>
      <a href="javascript:void(0);" @click="draw('Polygon')">画面</a>
      <a href="javascript:void(0);" @click="draw('Circle')">画圆</a>
      <a href="javascript:void(0);" @click="draw('Rectangle')">画矩形</a>
      <a href="javascript:void(0);" @click="draw('Point')">点</a>
      <a href="javascript:void(0);" @click="deactivate()">停止绘制</a>
      <br/>
      <a href="javascript:void(0);" @click="controlLabel()">打开Label</a>
      <a href="javascript:void(0);" @click="controlLabel(true)">关闭Label</a>
      <a href="javascript:void(0);" @click="controlPopup()">打开Popup</a>
      <a href="javascript:void(0);" @click="controlPopup(true)">关闭Popup</a>
      <a href="javascript:void(0);" @click="controlTooltip()">打开Tooltip</a>
      <a href="javascript:void(0);" @click="controlTooltip(true)">关闭Tooltip</a>
    </div>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          baseMapOne: [],
          baseMapTwo: [],
          url: '',
          opts: [],
          baseLayer: [],
          mapObj: window.GL,
          popup: new window.GL.Popup(),
          vectorLayerCom: [],
          pointTwo: [],
          polygonTwo: []
        }
      },
      mounted: function () {
        this.mapObj.initialized = false
        this.mapObj.init(this.initMap, '../../../../static/gmap/conf.json')
      },
      components: {
      },
      destroyed: function () {
        this.baseMapOne = null
        this.baseMapTwo = null
        this.mapObj = null
      },
      methods: {
        initMap () {
          this.baseMapOne = new this.mapObj.Map('gmapMapOne')
          this.baseMapTwo = new this.mapObj.Map('gmapMapTwo')
          this.url = 'http://192.168.181.102:8085/265.png?x=25&y=7&z=7&1=1'
          this.opts = { zoomOffset: 11 }
          this.crs = {
            origin: '0,90',
            resolutions: [
              0.0009765625,
              0.00048828125,
              0.000244140625,
              0.0001220703125,
              0.00006103515625,
              0.000030517578125,
              0.0000152587890625,
              0.00000762939453125,
              0.000003814697265625,
              0.0000019073486328125
            ]
          }
          this.baseLayerOne = this.mapObj.LayerLookup.createPgisTiledLayer(this.url, this.opts, this.crs)
          this.baseMapOne.addBaseLayer(this.baseLayerOne)
          this.baseLayerTwo = this.mapObj.LayerLookup.createPgisTiledLayer(this.url, this.opts, this.crs)
          this.baseMapTwo.addBaseLayer(this.baseLayerTwo)
          this.showPopup()
          // TODO moveend
          this.baseLayerOne.on('moveend', function (e) {
            console.log('moveend', e)
            this.showPopup()
          })

          // TODO 中心点
          var vectorLayer = new this.mapObj.VectorLayer()
          this.baseMapOne.addLayer(vectorLayer)

          var point = new this.mapObj.Point([120, 31])
          vectorLayer.addOverlay(point)
          point.highlight()

          // TODO DIV
          var vectorLayer2 = new this.mapObj.VectorLayer()
          this.baseMapOne.addLayer(vectorLayer2)
          var point2 = new this.mapObj.Point([120.59105869, 31.30115627], new this.mapObj.Icon.Div('<div>测试DIV</div>', 'customerIcon'))
          vectorLayer2.addOverlay(point2)

          // TODO 热力
          var hl = new this.mapObj.HeatLayer('heatLayer')
          hl.setLngLats(this.generate(100))
          this.baseMapOne.addLayer(hl)
          // TODO 删除图层
          // this.baseMapOne.removeLayer(hl)

          // TODO 绘制工具
          this.vectorLayerCom = new this.mapObj.VectorLayer()
          this.baseMapTwo.addLayer(this.vectorLayerCom)
          this.testOverlay()
        },
        draw (type) { // 绘制工具
          this.mapObj.DrawTool.activate(
            this.baseMapTwo,
            type,
            function (e) {
              if (e.status === 'created') {
                this.vectorLayerCom.addOverlay(e.feature)
              }
            },
            this
          )
        },
        deactivate () { // 停止绘制
          this.mapObj.DrawTool.deactivate()
        },
        showPopup () { // 测试DIV
          var pixel = this.baseMapOne.toPixel(this.baseMapOne.getCenter())
          this.popup.setLngLat(this.baseMapOne.getCenter())
          this.popup.setContent('x:' + pixel.x + '<br>y:' + pixel.y)
          this.baseMapOne.openPopup(this.popup)
        },
        testOverlay () { // GMap - Label,Tooltip,Popup
          this.pointTwo = new this.mapObj.Point(
            [120.58105869, 31.30115627],
            new this.mapObj.Icon.Smart('../../../static/gmap/0001.png', [32, 32])
          )
          this.vectorLayerCom.addOverlay(this.pointTwo)
          this.pointTwo.bindLabel('测试Label')
          this.pointTwo.bindPopup(
            '测试Popup<div style="width:0px;height:0px;border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;"></div>'
          )
          this.pointTwo.bindTooltip('测试Tooltip')

          this.polygonTwo = new this.mapObj.Polygon(
            '120.6114,31.27683;120.6666,31.23761;120.57162,31.21344',
            new this.mapObj.Style.Fill(
              {
                fillColor: '#afc333'
              },
              true
            )
          )
          this.vectorLayerCom.addOverlay(this.polygonTwo)
          this.polygonTwo.bindLabel('测试Label')
          this.polygonTwo.bindPopup(
            '测试Popup<div style="width:0px;height:0px;border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;"></div>'
          )
          this.polygonTwo.bindTooltip('测试Tooltip')
        },
        controlLabel (close) { // GMap - Label,Tooltip,Popup
          if (close) {
            this.pointTwo.closeLabel()
            this.polygonTwo.closeLabel()
          } else {
            this.pointTwo.openLabel()
            this.polygonTwo.openLabel()
          }
        },
        controlPopup (close) { // GMap - Label,Tooltip,Popup
          if (close) {
            this.polygonTwo.closePopup()
          } else {
            this.polygonTwo.openPopup()
          }
        },
        controlTooltip (close) { // GMap - Label,Tooltip,Popup
          if (close) {
            this.pointTwo.closeTooltip()
            this.polygonTwo.closeTooltip()
          } else {
            this.pointTwo.openTooltip()
            this.polygonTwo.openTooltip()
          }
        },
        generate (num) { // 热力经纬
          var list = []
          for (var i = 0; i < num; i++) {
            var lng = 120.58105869 + Math.random() * 0.5
            var lat = 31.0115627 + Math.random() * 0.5
            list.push([lng, lat])
          }
          return list
        }
      }
    }
</script>

<style>
  @import "../../../../static/gmap/gl.min.css";
  .zl-div-main{
    width:100%;
    height:100%;
    position: relative;
  }
  .zl-map-container-one {
    width:calc(50% - 2px);
    height:calc(100% - 2px);
    float:left;
    border:1px solid;
  }
  .zl-map-container-two {
    width:calc(50% - 2px);
    height:calc(100% - 2px);
    float:right;
    border:1px solid;
  }

  .customerIcon {
    width: 90px;
    height: 90px;
    text-align: center;
    border-radius: 50%;
    background: deepskyblue;
    color: #348fd4;
    font-size: 15px;
    vertical-align: middle
  }

  .customerIcon > div > div {
    background: #f064ff;
    width: 90px;
    height: 90px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    line-height: 90px
  }

  .pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 1000;
    position: absolute;
    top: 20px;
    right: 20px
  }

  .pane a {
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
</style>
